<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
		
	<body>
		<script type="text/javascript">
		
		
			require.config({
				paths:{
					echarts:'./js'
				}
			});
			require(
				 [	
                	'echarts',
                	'echarts/chart/line',
		            'echarts/chart/bar',
		            'echarts/chart/scatter',
		            'echarts/chart/k',
		            'echarts/chart/pie',
		            'echarts/chart/radar',
		            'echarts/chart/force',
		            'echarts/chart/chord',
		            'echarts/chart/gauge',
		            'echarts/chart/funnel',
		            'echarts/chart/eventRiver',
		            'echarts/chart/venn',
		            'echarts/chart/treemap',
		            'echarts/chart/tree',
		            'echarts/chart/wordCloud',
		            'echarts/chart/heatmap',
		            'echarts/chart/map'
                ],
             	function (ec){
             		var myChart = ec.init(document.getElementById('main'));
             		var option = {
						    title : {
						        text: '人物关系：乔布斯',
						        subtext: '数据来自人立方',
						        x:'right',
						        y:'bottom'
						    },
						    tooltip : {
						        trigger: 'item',//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
						        formatter: '{a} : {b}'
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            restore : {show: true},
						            magicType: {show: true, type: ['force', 'chord']},//力导向布局图，和弦图切换
						            saveAsImage : {show: true}
						        }
						    },
						    legend: {
						        x: 'left',
						        data:['1','2']
						    },
						    series : [
						        {
						            type:'force',
						            name : "人物关系", //鼠标悬浮，提示字符
						            ribbonType: false,
						            categories : [ //节点分类,
						                {
						                    name: '4'        //中间的。主要的节点
						                },
						                {
						                    name: '1',        //与legend,data对应
						                   
						                },
						                {
						                    name:'2'
						                }
						            ],
						            itemStyle: {
	//		       	图形样式		
	//详见 itemStyle，注意力导向图单个 category 的 itemStyle 中没有 nodeStyle 的配置项，
	//而是直接使用 normal(emphasis) 下的 color, borderWidth 和 borderColor
						                normal: {
						                    label: {
//						                    	标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，
//												漏斗图默认显示在右侧，离图形距离由labelLine.length决定
//												地图标签不可指定位置，
//												折线图，柱形图，K线图，散点图可指定position见下
						                        show: true,
						                        textStyle: {
						                            color: '#333'
						                        }
						                    },
						                    nodeStyle : { //节点样式
						                        brushType : 'both',
						                        borderColor : 'rgba(255,215,0,0.4)',
						                        borderWidth : 1
						                    },
						                    linkStyle: {
						                        type: 'curve'
						                    }
						                },
						                emphasis: {//强调样式
						                    label: {
						                        show: false
						                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
						                    },
						                    nodeStyle : {//节点样式
						                        //r: 30
						                    },
						                    linkStyle : {}//边样式
						                }
						            },
						            useWorker: false,//是否在浏览器支持 web worker 的时候把布局计算放入 web worker 中
						            minRadius : 15, //顶点数据映射成symbol半径后的最小半径, ribbonType为false时有效
						            maxRadius : 25,//顶点数据映射成symbol半径后的最大半径, ribbonType为false时有效
						            gravity: 1.1, //向心力系数，系数越大则节点越往中心靠拢
						            scaling: 1.1,//布局缩放系数，并不完全精确, 效果跟布局大小类似
						            roam: 'scale',
						            //是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），
						            //'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
						            nodes:[// 节点、对象
						                {category:0, name: '乔布斯', value : 10, label: '乔布斯\n（主要）'},
						                //label 节点标签名称，默认显示name作为标签
						                //category 节点的 category index. [0,1,2]对应节点分类中的[人物，家人，朋友]
						                //value 节点值，如果不设置会取所有边的权重(weight)和，值越大节点显示面积越大
						                {category:1, name: '丽萨-乔布斯',value : 2},
						                {category:1, name: '保罗-乔布斯',value : 3},
						                {category:1, name: '克拉拉-乔布斯',value : 3},
						                {category:1, name: '劳伦-鲍威尔',value : 7},
						                {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
						                {category:2, name: '奥巴马',value : 8},
						                {category:2, name: '比尔-盖茨',value : 9},
						                {category:2, name: '乔纳森-艾夫',value : 4},
						                {category:2, name: '蒂姆-库克',value : 4},
						                {category:2, name: '龙-韦恩',value : 1},
						            ],
						            links : [// 关系线
						                {source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
						                //source 源节点的index或者源节点的name
						                //target 目标节点的index或者目标节点的name
						                //weight 边的权重   ， 值越大线越短，两节点挨的越近。
						                //name 鼠标悬浮提示
						                {source : '保罗-乔布斯', target : '乔布斯', weight : 0.2, name: '父亲'},
						                {source : '克拉拉-乔布斯', target : '乔布斯', weight : 0.1, name: '母亲'},
						                {source : '劳伦-鲍威尔', target : '乔布斯', weight : 0.2},
						                {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 0.3, name: '合伙人'},
						                {source : '奥巴马', target : '乔布斯', weight : 0.1},
						                {source : '比尔-盖茨', target : '乔布斯', weight : 0.6, name: '竞争对手'},
						                {source : '乔纳森-艾夫', target : '乔布斯', weight : 0.1, name: '爱将'},
						                {source : '蒂姆-库克', target : '乔布斯', weight : 0.1},
						                {source : '龙-韦恩', target : '乔布斯', weight : 0.1},
						                {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 0.1},
						                {source : '奥巴马', target : '保罗-乔布斯', weight : 0.1},
						                {source : '奥巴马', target : '克拉拉-乔布斯', weight : 0.1},
						                {source : '奥巴马', target : '劳伦-鲍威尔', weight : 0.1},
						                {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 0.1},
						                {source : '比尔-盖茨', target : '奥巴马', weight : 0.6},
						                {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 0.1},
						                {source : '蒂姆-库克', target : '奥巴马', weight : 0.1}
						            ]
						        }
						    ]
						};
                    
             			
             		
             		
             		myChart.setOption(option);	
             		
             	}
			);
			
		</script>
		<div id="main" style="height: 500px;border: 1px solid #CCCCCC; padding: 10px;"></div>
	</body>
</html>
